<template>
	<view class="content">
		 <view id="videoContain">
		        <!-- <video id="player-container-id"  preload="auto" playsinline webkit-playsinline></video> -->
		    </view>
	</view>
</template>

<script>

export default {
    name: 'TencentPlayer',
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    mounted() {
        this.tcpalyer();
    },
        
    methods: {
        tcpalyer() {
            // sdk引入有顺序
            let script1 = document.createElement("script");
            script1.type = "text/javascript";
            script1.src =
            "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js";
            document.getElementsByTagName("head")[0].appendChild(script1);
            // 创建script标签，引入外部文件
            let script = document.createElement("script");
            script.type = "text/javascript";
            script.src =
            "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js";
            document.getElementsByTagName("head")[0].appendChild(script);
            
            const video = document.createElement("video")    
            video.setAttribute("id", "player-container-id")
            video.setAttribute('playsinline',true)
            video.setAttribute('webkit-playsinline',true)
            video.setAttribute('autoplay',true)
            document.getElementById("videoContain").appendChild(video)
            
            // 引入成功
            script.onload = function () {
                console.log("js资源加载成功了");
                var player = TCPlayer("player-container-id", {
                fileID: '387702307847129127',
                appID: '1500006438',
				psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNjQzOCwiZmlsZUlkIjoiMzg3NzAyMzA3ODQ3MTI5MTI3IiwiY3VycmVudFRpbWVTdGFtcCI6MTY2NzIxNjY1MywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsInJhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJleHBpcmVUaW1lU3RhbXAiOjIyMDEwMTEyMDAsInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNjQzOC52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.AYqjCMFQlo9nn6EMaF0Nol5vVq9miaoUqyvmFF62aSg',
                    // autoplay: true, 
                    width: "375",<template>
	<view :style="Theme">
		<uni-nav-bar :statusBar="true" :fixed="true"  title="个人中心" />
		<!-- 用户信息 -->
		<view class="userInfo" :style="{'background': 'url(../../../static/user/userBg.png),'+bgImageColor,'background-size':'100%'}">
			<image src="/static/user/user.jpg"></image>
			<view class="userName">用户名称</view>
		</view>
		<!-- 个人中心功能 -->
		<view class="menu">
			<menuList leftIcon="icon-about" menuName="关于我们" rightIcon="icon-right"  />
			<menuList leftIcon="icon-shezhi" menuName="设置" rightIcon="icon-right" @onClick="click" @clickRight="click" />
		</view>
	</view>
</template>

<script>
	import menuList from '@/components/menuList/menuList.vue'
	export default {
		data() {
			return {
				
			}
		},
		components: {
			menuList
		},
		computed: {
			bgImageColor() {
				return this.$store.state.bgImage
			}
		},
		onLoad() {
			
		},
		onShow() {
			// 检测页面是否需要登录
			this.sjuLogin.checkLogin('/tab/my')
			this.sjuTools.setTabBar()
		},
		methods: {
			click(){
				this.sjuNav.navigateTo('/my/setting')
			}
		}
	}
</script>

<style lang="scss">
	// 用户信息
	.userInfo{
		width: 100%;
		height: 300rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			float: left;
			margin: 100rpx 30rpx;
			border-radius: 50rpx;
		}
		.userName{
			width: 590rpx;
			height: 100rpx;
			line-height: 100rpx;
			float: left;
			margin: 100rpx 0 30rpx 0;
			color: var(--inverse-text-color);
			font-size: 36rpx;
		}
	}
	
	// 功能
	.menu{
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		background-color: var(--accent-bg-color);
	}
	
</style>

                    height: "320",
                });
            };
            // 引入失败
            script.onerror = function () {
                console.log("js资源加载失败了");
            };
        },

    }
};
</script>


<style lang="scss">

</style>
